<!-- 地区 模态框 -->
<div class="modal fade" id="district-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">选择地区</h4>
            </div>
            <div class="modal-body" style="height: 600px;overflow: auto;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="portlet-body">
                                <form id="ajax-form" action="" class="form-horizontal js-check-wrap" name="ajaxForm">
                                    <div class="mt-checkbox-list">
                                        {foreach name="districts" item="district" key="key"}
                                        <label class="mt-checkbox mt-checkbox-outline" style="font-weight: 700;">
                                            <input type="checkbox" class="input-small js-check-all"> {$district.name}
                                            <span></span>
                                        </label>
                                        <div class="row child">
                                            {foreach name="district.child" item="child" key="childKey"}
                                            <div class="col-md-2">
                                                <label class="mt-checkbox mt-checkbox-outline">
                                                    <input type="checkbox" class="input-small js-check" name="district" value="{$child.name}"> {$child.name}
                                                    <span></span>
                                                </label>
                                            </div>
                                            {/foreach}
                                        </div>
                                        {/foreach}
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info confirm-district">确定</button>
                <button type="button" class="btn default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    function handleCheckbox(){
        if ($('.js-check-wrap').length) {
            var total_check_all = $('input.js-check-all');

            //遍历所有全选框
            $.each(total_check_all, function () {
                var check_all = $(this),
                    check_items;

                check_items = check_all.parent().next().find('input.js-check').not(":disabled");

                //点击全选框
                check_all.change(function (e) {
                    var check_wrap = check_all.parents('.js-check-wrap'); //当前操作区域所有复选框的父标签（重用考虑）
                    if ($(this).prop('checked')) {
                        //全选状态
                        check_items.prop('checked', true);

                        //所有项都被选中
                        if (check_wrap.find('input.js-check').length === check_wrap.find('input.js-check:checked').length) {
                            check_wrap.find(total_check_all).prop('checked', true);
                        }
                    } else {
                        //非全选状态
                        check_items.prop('checked', false);
                    }
                });

                //点击非全选时判断是否全部勾选
                check_items.change(function () {
                    var check_all = $(this).parents('.child').prev().find('input.js-check-all');
                    if ($(this).prop('checked')) {
                        if (check_items.filter(':checked').length === check_items.length) {
                            //已选择和未选择的复选框数相等
                            check_all.prop('checked', true);
                        }
                    } else {
                        $(this).prop('checked', false);
                        check_all.prop('checked', false);
                    }

                });
            });
        }
    }

    $(document).ready(function () {
        handleCheckbox();
    });
</script>